<template>
	<view style="background-color: rgb(247,247,247);padding-bottom: 120upx;">
		<u-swiper :list="data.pic_set" height="400"></u-swiper>

		<view class="card_top">
			<view class="" style="display: flex;">
				<view class="money">
					<text>￥</text>{{money}}
				</view>
				<view class="icon">
					<view class="" @click="setStar">
						<u-icon :name="collect_zt?'star-fill':'star'" color="rgb(244,122,105)" size="48"></u-icon>
					</view>
					<view class="" @click="dialPhone">
						<u-icon name="phone-fill" color="rgb(244,122,105)" size="48"></u-icon>
					</view>
				</view>
			</view>

			<view class="name">
				{{data.title||''}}
			</view>

			<view class="grade">
				<view class="">
					<u-rate :count="5" v-model="scoring" active-color="rgb(249,126,102)" disabled></u-rate>
				</view>

				<span>{{scoring||''}}</span>
				<span>{{data.comm_num}}条</span>
				<span>{{data.pay_num}}购买</span>
			</view>
			<view class="time">
				<view class="">
					<text style="margin-right: 15upx;">上课时间：{{data.time_a}} -{{data.time_b}}</text><span
						style="margin-left: 10upx;">{{data.time_s}}-{{data.time_s_en}}</span>
				</view>
				<text style="margin: 0 5upx;" v-for="(item ,index) in data.time_en">{{item}}</text>
			</view>

			<view style="font-weight: 900;margin-top: 30upx;">
				拼团详情
			</view>




			<view class="type">
				<view class="typeItem">
					<image src="/static/age.png" mode=""></image> <text>学龄阶段</text>
					<text>{{data.school_title}}</text>
				</view>
				<view class="typeItem">
					<image src="/static/stage.png" mode=""></image> <text>适用阶段</text>
					<text>{{data.applicable}}</text>
				</view>
				<view class="typeItem">
					<image src="/static/hour.png" mode=""></image> <text>总课时数</text>
					<text>{{data.period_num}}</text>
				</view>
				<view class="typeItem">
					<image src="/static/class.png" mode=""></image> <text>班级类型</text>
					<text>{{data.pattern}}</text>
				</view>
			</view>
		</view>
		<view class="card_cluster" v-if="spellList.length">
			<view class="title">
				<text style="color: rgb(240, 105, 18);">{{spellList.length}}</text>人正在拼团，可直接参与
			</view>

			<view class="cluster">
				<view class="cluster_item" v-for="(item ,index) in spellList" :key="index">
					<view class="img_head">
						<image :src="item.user.pic" mode=""></image>
					</view>
					<view class="name">
						{{item.user.user}}
					</view>
					<view class="gap">
						还差<text style="color: rgb(240, 105, 18);">{{data.spell_num-item.order.length}}</text>人拼成
					</view>

					<view class="btn" @click="navRoute('foundOrder',2,item.id)">
						去拼团
					</view>
				</view>
			</view>
		</view>

		<view class="card_details">
			<view class="title">
				课程内容
			</view>
			<view class="u-content" style="margin: 20upx 0;">
				<u-parse :html="data.content_a"></u-parse>
			</view>
			<view class="title">
				购买须知
			</view>
			<view class="subtitle">
				<text>{{data.content_b}}</text>
			</view>
		</view>
		<view class="address" @click="goMap()">
			<view class="address_text">
				<view class="">
					{{merchants.add||''}}
				</view>
				<view class="">
					距你{{merchants.juli>1000?merchants.juli/1000:merchants.juli}}{{merchants.juli>1000?'km':'m'}}
				</view>
			</view>
			<view class="address_icon">
				<view class="">
					<u-icon name="map-fill" size="56"></u-icon>
				</view>
				<!-- 			<view class="">
						<u-icon name="phone-fill" size="56"></u-icon>
					</view> -->

			</view>
		</view>
		<view class="card_comment">
			<view class="title">
				用户评价（{{commList.length}}）
			</view>
			<view class="type">
				<view class="typeItem" v-for="(item ,index) in evaluate">
					{{item.title}}（{{item.count}}）
				</view>
			</view>

			<view class="comment">
				<view class="commentItem" v-for="(item) in commList">
					<view class="img_head">
						<image :src="item.user.pic" mode=""></image>
					</view>
					<view class="text">
						<view class="" style="display: flex;">
							<view class="name">
								{{item.user.user}}
							</view>
							<view class="time">
								{{item.time}}
							</view>
						</view>
						<view class="" style="margin: 5upx 0 20upx 0;">
							<u-rate :count="5" v-model="item.scoring" disabled size="24" gutter="5"></u-rate>
						</view>
						<u-read-more show-height="200" :shadowStyle="shadowStyle" close-text="全文" text-indent="0">
							<text class="content_text">{{item.content}}</text>
							<!-- <rich-text :nodes="item.content"></rich-text> -->
						</u-read-more>

						<view class="img">
							<view class="imgItem" v-for="(items, Xindex) in item.pic_set" :key="Xindex"
								@click="$util.enlargement(item.pic_set)">
								<image :src="items" mode="aspectFill"></image>
							</view>

						</view>
					</view>


				</view>
			</view>
		</view>

		<view class="btnSubmit">
			<view class="oneself" @click="navRoute('foundOrder',1)" style="color: #666666;">
				<view class="" style="color: #FA6400;font-weight: 900;font-size: 36upx;">
					<text style="font-size: 26upx;">￥</text>{{data.price}}
				</view>
				单独购买
			</view>
			<view class="team" v-if="code1!=-1" @click="navRoute('foundOrder',2)">
				<view class="" style="font-weight: 900;">
					<text style="font-size: 26upx;">￥</text>{{data.price_a}}
				</view>
				{{data.spell_num}}人拼团
			</view>
			<view class="help" v-if="code2!=-1" @click="$u.throttle(createHelp, 5000)">
				<view class="" style="font-weight: 900;">
					<text style="font-size: 26upx;">￥</text>{{data.price_b}}
				</view>
				邀请好友砍价
			</view>
		</view>
		<u-toast ref="uToast" />

		<Loading />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['https://img0.baidu.com/it/u=103721101,4076571305&fm=26&fmt=auto&gp=0.jpg'],
				value: 4.5,
				shadowStyle: {
					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					paddingTop: "100rpx",
					marginTop: "-100rpx"
				},
				code1: -1,
				code2: -1,
				commentList: [],
				id: '',
				collect_zt: 0,
				data: {},
				merchants: {},
				scoring: 0,
				evaluate: [],
				commList: [],
				spellList: [],
				tel: '',
				page: 1,
				networkCode: true
			}
		},
		computed: {
			money: function() {
				let money = 0
				if (this.code1 == -1 && this.code2 == -1) {
					money = this.data.price
				} else if (this.code1 != -1 && this.code2 != -1) {
					money = this.data.price_a > this.data.price_b ? this.data.price_b : this.data.price_a
				} else {
					money = this.code1 != -1 ? this.data.price_a : this.data.price_b
				}
				return money
			}
		},
		onLoad(e) {
			console.log(e)
			this.id = e.id
			this.newData()
		},
		methods: {
			newData() {
				let id = this.id
				let location = uni.getStorageSync('location');
				this.$myRuquest('home/index/courses_details', {
					cour_id: id,
					longitude: location.lng||'',
					latitude: location.lat||''
				}).then(res => {
					if (res.code == 400) {
						console.log(res)
						this.tel = res.data.merchants.service_tel
						this.collect_zt = res.data.collect_zt
						this.data = res.data.courses
						this.merchants = res.data.merchants
						this.scoring = res.data.scoring.toFixed(1)
						this.data.time_a = this.$util._date_time(+this.data.time_a * 1000)
						this.data.time_b = this.$util._date_time(+this.data.time_b * 1000)
						this.data.time_en = this.data.time_en.split(',')
						this.code1 = this.data.type.indexOf('2')
						this.code2 = this.data.type.indexOf('3')
					}
				})
				this.$myRuquest('home/index/spell_list', {
					cour_id: this.id
				}).then(res => {
					if (res.code == 400) {
						this.spellList = res.data
					}
				})
				this.$myRuquest('home/index/comm_title', {
					cour_id: id
				}).then(res => {
					if (res.code == 400) {
						this.evaluate = res.data
					}
				})
				this.commonList()

			},
			commonList() {
				if (!this.networkCode) return uni.showToast({
					title: '暂无更多评价~',
					icon: 'none'
				});
				this.$myRuquest('home/index/comm_list', {
					cour_id: this.id,
					page: this.page,
					num: 5
				}).then(res => {
					console.log(res)
					if (res.code == 400) {
						if (res.data.length != 5) this.networkCode = false
						if(this.commList.length==0) this.commList.push(...res.user_list)
						this.page++
						res.data.forEach(item => {
							item.scoring = +item.scoring
							item.time = this.$u.timeFrom(item.time);
						})
						this.commList.push(...res.data)
					}
				})
			},
			goMap() {
				let that = this
				uni.openLocation({
					latitude: +that.merchants.add_latitude,
					longitude: +that.merchants.add_longitude,
					success: function() {
						console.log('success');
					},
					fail: function(err) {
						console.log(err);
					}
				});
			},
			navRoute(path, type, round_id = 0) {
				// let data = JSON.parse(JSON.stringify(this.data))
				// data.content_a = ''
				// data.content_b = ''
				console.log(round_id)
				uni.navigateTo({
					url: `../${path}/${path}?type=${type}&round_id=${round_id}&courId=${this.id}`
				});
			},


			dialPhone() {
				uni.makePhoneCall({
					phoneNumber: this.tel
				});
			},
			setStar() {
				this.$myRuquest('home/user/courses_collect', {
					cour_id: this.id
				}, 'POST').then(res => {
					if (res.code == 400) {
						this.collect_zt = this.collect_zt ? 0 : 1
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})
					}
				})
			},
			createHelp() {

				let data = {
					type: 3,
					cour_id: this.id,
					baby_id: ''
				}
				this.$myRuquest('home/user/courses_order', data, 'POST').then(res => {
					if (res.code == 400) {
						this.$refs.uToast.show({
							title: '订单生成成功',
							type: 'success',
							duration: 1000,
							url: 'pages/organizationDetails/bargain/bargain',
							params: {
								order_id: res.order_id,
							}
						})
					}
				})
			},
			onReachBottom() {
				this.commonList()

			},
		}
	}
</script>

<style lang="less">
	.twoCode {
		width: 100vw;
		height: 100vh;
	}

	.btnSubmit {
		position: fixed;
		bottom: 0upx;
		width: 100vw;
		display: flex;
		background-color: #fff;
		padding: 20upx;

		view {
			flex: 1;
			margin: 0 10upx;
			border-radius: 12upx;
			// height: 120upx;
			// line-height: 120upx;
			padding: 5upx;
			text-align: center;
			color: #fff;
		}

		.oneself {
			background-color: #F4F5F7;

		}

		.team {
			// background-color: rgb(240, 105, 18);
							background: linear-gradient(to right, rgb(246, 183, 129), rgb(252, 52, 89));
		}

		.help {
			background: linear-gradient(to right, #4B9CFC, #0155B5);
		}
	}

	.card_top {
		background-color: #fff;
		padding: 20upx;


		.money {
			color: rgb(240, 105, 18);
			flex: 5;
			font-size: 50upx;
			font-weight: 900;

			text {
				font-size: 34upx;
			}
		}

		.icon {
			flex: 2;
			display: flex;
			text-align: right;

			view {
				flex: 1;
			}
		}

		.name {
			font-size: 38upx;
			font-weight: 900;
		}

		.grade {
			width: 100%;
			display: flex;
			margin: 12upx 0;

			span {
				margin: 0 20upx;
				padding: 5upx 10upx;
				border-radius: 12upx;
				font-size: 22upx;
				color: #7a7a7a;
				background-color: #F4F5F7;
			}

			span:nth-child(2) {
				color: rgb(249, 126, 102);
				margin-right: 0upx;
				font-size: 30upx;
				background-color: #fff;
				padding: 0;
				margin: 0;
			}
		}

		.time {
			font-size: 20upx;
			color: #666666;
		}

		.type {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			padding-left: 10upx;

			.typeItem {
				width: 48%;
				margin: 20upx 1%;
				display: flex;
				font-size: 26upx;

				image {
					width: 20upx;
					height: 20upx;
					margin: auto 0;
				}

				text:nth-child(2) {
					margin: 0 15upx;
					color: #666666;
				}
			}
		}

	}

	.card_cluster {
		padding: 20upx;
		background-color: #fff;
		margin-top: 20upx;

		.title {}

		.cluster {
			.cluster_item {
				display: flex;
				margin: 30upx 20upx;

				.img_head {
					width: 70upx;
					height: 70upx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					width: 160upx;
					line-height: 70upx;
					padding-left: 20upx;
					flex: 2;
					overflow: hidden;
					text-overflow:ellipsis; 
					white-space: nowrap;
				}

				.gap {
					width: 240upx;
					line-height: 70upx;
					text-align: center;
					flex: 2;

				}

				.btn {
					flex: 1;
					height: 60upx;
					line-height: 60upx;
					margin: auto 0;
					text-align: center;
					color: #fff;
					background-color: #007AFF;
					background: linear-gradient(to right, rgb(246, 183, 129), rgb(252, 52, 89));
					border-radius: 12upx;
					margin-left: 20upx;
				}
			}
		}
	}

	.card_details {
		background-color: #fff;
		padding: 20upx;
		margin: 20upx 0;

		.title {
			font-weight: 900;
		}

		.subtitle {
			margin: 20upx 0;
			view:nth-child(1) {
				color: #FA6400;
			}
		}
	}

	.card_comment {
		padding: 20upx;
		background-color: #fff;
		margin-top: 20upx;

		.type {
			display: flex;
			flex-wrap: wrap;

			.typeItem {
				margin: 10upx;
				padding: 5upx 10upx;
				border-radius: 10upx;
				background-color: rgba(240, 105, 18, .05);
				color: #FA6400;
			}
		}

		.comment {
			.commentItem {
				display: flex;
				margin: 20upx 0;

				.img_head {
					width: 80upx;
					margin-right: 10upx;

					image {
						width: 80upx;
						height: 80upx;
						border-radius: 50%;
					}
				}

				.text {
					width: 100%;

					.name {
						font-size: 24upx;
						font-weight: 900;
						flex: 1;
					}

					.time {
						flex: 1;
						text-align: right;
						font-size: 22upx;
						color: #a7a7a7;
					}
					.u-content {
						line-height: 1.2 !important;
					}
					.content_text {
						font-size: 26upx;
					}
					.img {
						display: flex;
						flex-wrap: wrap;
						width: 100%;
						margin-top: 10upx;
						.imgItem {
							flex: 0 0 32.5%;
							image {
								width: 100%;
								height: 200upx;
							}
						}

						.imgItem:nth-child(2) {
							margin: 0 1.25%;
						}

						.imgItem:nth-child(5) {
							margin: 0 1.25%;
						}

						.imgItem:nth-child(8) {
							margin: 0 1.25%;
						}

					}
				}
			}
		}
	}
	.address {
		display: flex;
		padding-left: 45upx;
		font-size: 26upx;
		margin-top: 10upx;
		background-color: #fff;
		border-radius: 12upx;
		margin: 20upx 0;
		padding: 20upx;
		.address_text {
			flex: 7;
			view:nth-child(2) {
				color: rgb(249, 126, 102);
			}
		}

		.address_icon {
			flex: 1;
			display: flex;
			color: rgb(249, 126, 102);
			text-align: left;
			view {
				flex: 1;
			  text-align: right;
			}
		}
	}
</style>
